<template>
  <view>
    <!-- 添加api详情页面 -->
      <view class="box-top">
        <view class="text-left">
          <text class="text-title">实盘交易的API需要交易权限</text>
          <text class="text-con">API通过AES加密保密，使用时通过区块链非对称加密传输，使用后立即销毁</text>
        </view>
        <view class="btn-right">
          <button type="primary" size="mini">操作指导</button>
        </view>
      </view>
      <view class="api-list">
        <view class="">交易所</view>
        <view class="api-bottom">
          <text>OkexV5</text>
          <uni-icons size="24" color="#5d7492" type="arrowdown" @click="show = true"></uni-icons>
        </view>
         <u-select v-model="show" :list="list"></u-select>
      </view>
      <view class="api-list">
        <view class="">Api Key</view>
        <view class="api-bottom">
          <text>OkexV5</text>
          <uni-icons size="24" color="#FFFFFF" type="scan" @click="show = true"></uni-icons>
        </view>
         <u-select v-model="show" :list="list"></u-select>
      </view>
      <view class="api-list">
        <view class="">Secret Key</view>
        <view class="api-bottom">
          <text>OkexV5</text>
          <uni-icons size="24" color="#FFFFFF" type="scan" @click="show = true"></uni-icons>
        </view>
         <u-select v-model="show" :list="list"></u-select>
      </view>
      <view class="api-list">
        <view class="">Passphrase</view>
        <view class="api-bottom">
          <text>OkexV5</text>
          <uni-icons size="24" color="#FFFFFF" type="scan" @click="show = true"></uni-icons>
        </view>
         <u-select v-model="show" :list="list"></u-select>
      </view>
      <view class="api-list">
        <view class="">API有效期 <uni-icons color="#9295a3" type="info" @click="open"></uni-icons>
        <u-modal v-model="showmo" :content="content" show-cancel-button></u-modal>
        </view>
        <view class="api-bottom">
          <text>OkexV5</text>
          <text>天</text>
        </view>
         <u-select v-model="show" :list="list"></u-select>
      </view>
      <button class="btn-daoru" type="primary">导入</button>
      <view class="text-bottom">
        <view class="tishi">提示</view>
        <text>为了账户资产安全及方便查阅交易数据，建议您重新申请API，不要和其它渠道共用</text>
        <view class="">
          OKEx V5服务器IP:159.138.39.31
        </view>
      </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        showmo:false,
        content: '有效期请在您的交易所账户API管理界面查询',
        list: [
        					{
        						value: '1',
        						label: '江'
        					},
        					{
        						value: '2',
        						label: '湖'
        					}
        				],
      }
    },
    methods: {
      open() {
      				this.showmo = true;
      			}
    }
  }
</script>

<style>
  page{
    padding: 20rpx;
  }
    .box-top{
      display: flex;
      align-items: center;
      height: 180rpx;
      background-color: #131a2a;
      border-radius: 20rpx;
      margin: 20rpx 0;
      padding: 0 20rpx;
    }
    .text-left{
      display: flex;
      flex-direction: column;
      width: 70%;
      margin-right: 40rpx;
      color: #808598;
    }
    .text-title{
      font-size: 32rpx;
      color: #FFFFFF;
       /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */  
       white-space: nowrap;  
       /* 2.溢出的部分隐藏起来 */  
       overflow: hidden;  
       /* 3. 文字溢出的时候用省略号来显示 */  
       text-overflow: ellipsis;  
    }
    .text-con{
      overflow: hidden;  
       text-overflow: ellipsis;  
       /* 弹性伸缩盒子模型显示 */  
       display: -webkit-box;  
       /* 限制在一个块元素显示的文本的行数 */  
       -webkit-line-clamp: 2;  
       /* 设置或检索伸缩盒对象的子元素的排列方式 */  
       -webkit-box-orient: vertical; 
    }
    .btn-right{
      width: 30%;
    }
    .api-list{
      color: #FFFFFF;
      font-size: 32rpx;
      border-bottom: 1px solid #1a1a1a;
      padding-bottom: 8rpx;
      margin-top: 60rpx;
    }
    .api-bottom{
      display: flex;
      justify-content: space-between;
      margin-top: 10rpx;
    }
    .btn-daoru{
      margin: 50rpx 0;
    }
    .text-bottom{
      font-size: 24rpx;
      color: #777789;
    }
    .tishi{
      font-size: 32rpx;
      color: #2c81f7;
      margin-bottom: 10rpx;
    }
</style>
